<template>
    <div class="commentparent" >

      <div  v-for="(item,index) in commentList" :key="index">
        <div class="commentItem">
          <div class="userImg">
            <img src="../../images/userimg.jpg" alt="">
          </div>
          <div class="commentcontent">
            <p>
              <span   v-if="item.userinfo">{{item.userinfo.name}}</span>
              <span v-else>此用户无姓名</span>
              <span>{{item.comment_date}}</span>
            </p>
            <div>
              {{item.comment_content}}
            </div>
          </div>
        </div>
        <div>
          <comment-item   style="padding-left: 13vw" :commentChild = "item.child"></comment-item>
        </div>
      </div>
    </div>
</template>

<script>
  import commentItem from './commentItem'
    export default {
    components:{
      commentItem
    },
        name: "comment",
        data() {
            return {
              commentList:null
            }
        },
        methods: {
          async commentData(){
            const res = await this.$http.get('/comment/' + this.$route.params.id)
            if(res.data){
              this.$emit('lengthselect',res.data.length)
            }
            // console.log(res.data)
            this.changeCommentData(res.data)
            this.commentList = this.changeCommentData(res.data)
            console.log(this.commentList)
          },
          changeCommentData(data){
            // console.log(data)

            function fn(temp) {
              console.log("就入方法了")
              let arr1 = []
              for (var i = 0; i< data.length;i++){
                if (data[i].parent_id == temp){
                  arr1.push(data[i])
                  data[i].child = fn(data[i].comment_id)
                }
              }
              return arr1
            }
            return  fn(null)
          },
          PostChildClick(){
            console.log("123")
          }
        },
      created() {
          this.commentData()
      }
    }
</script>

<style scoped lang="less">
  p,span{
    background-color: white;
  }
  .commentparent{
    >div{
      border-bottom: 0.1vw solid #e7e7e7;
    }
    padding: 3vw 3vw;
    .commentItem{
      display: flex;
      padding: 3.5vw 0;
      .userImg{
        margin-right: 3vw;
        width: 11vw;
        height: 11vw;
        img{
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .commentcontent{
        flex: 1;
        p{
          font-size: 3.3vw;
          color: #7f7f7f;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.9vw;
        }
        div{
          font-size: 3.5vw;
        }
      }
    }

  }
</style>
